<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		.selected {
			color: red;
			font-weight: bold;
		}
	</style>

	<script type="text/javascript">
		cola(function (model) {
			model.set("directions", [
				{value: "east", text: "东"},
				{value: "south", text: "南"},
				{value: "west", text: "西"},
				{value: "north", text: "北"}
			]);

			model.set("selection", {
				south: true,
				west: true
			});

			model.action({
				getSelectedDirections: function () {
					var selection = model.get("selection").toJSON();
					var directions = [];
					for (var p in selection) {
						if (selection.hasOwnProperty(p) && selection[p] === true) {
							directions.push(p);
						}
					}
					return directions.join(", ");
				}
			});
		});
	</script>
</head>
<body style="padding:1em;">

<div>
	<h3>二次求值表达式</h3>
	<ul>
		<li c-repeat="direction in directions">
			<c-checkbox c-bind="?'selection.' + direction.value" c-label="direction.text"></c-checkbox>
		</li>
	</ul>
	选择: <label c-bind="getSelectedDirections()"></label>
</div>

<hr>

<div>
	<h3>别名表达式</h3>
	<ul c-alias="selection as s">
		<li c-class="selected: s.east">East</li>
		<li c-class="selected: s.south">South</li>

		<li c-class="selected: selection.west">West</li>
		<li c-class="selected: selection.north">North</li>
	</ul>
</div>

</body>
</html>